<template>
    <div class="container">
        <div class="imgBox">
            <img :src="item.url" alt="" v-for='(item,index) in imgArr' :key='index' @click="add(item.name)">
        </div>
      <!-- <EditDiv :value='cont' v-on:input='change'></EditDiv> -->
    <!-- <div class="input" contenteditable v-html='conttset' id='input'></div> -->
    <EditDiv :minHeight="'50'" :value='conttset' v-on:input="changeText"></EditDiv>
    <p style="margin-top:0.4rem;" @click="send">提交</p>
    </div>
</template>
<script>
    import EditDiv from './editDiv.vue';
    import {vodEmotion2Local} from '@/assets/js/tools'
    const imgArr = [
        {'name':'u1f3a4','url':'static/img/u1f3a4.png'},
        {'name':'u1f4a9','url':'static/img/u1f4a9.png'}
    ]
    export default{
        data(){
            return{
                cont:'',
                imgArr:imgArr,
            }
        },
        components:{
            EditDiv
        },
        computed:{
            conttset(){
                let reg = new RegExp('\\[(.+?)\\]',"g");
                let ss =  this.cont.replace(reg,"<img src='static/img/$1.png'>");
                return ss;
            }
        },
        methods:{
            add(name){
                this.cont = this.cont+'['+name+']';
            },
            change(v){
                this.cont = v;
            },
            send(){
                var html = this.cont;
                console.log(vodEmotion2Local(html));
            },
            changeText(val){
                console.log(val);
                this.cont = val;
            }
        }
    }
</script>
<style scoped>
.container{
    font-size: 0.3rem;
    padding: 0.3rem;
}
.imgBox{
    height: 2rem;
    width: 5rem;
    border:solid 1px red;
    text-align: left;
}
.input{
    height: 2rem;
    width: 5rem;
    border:solid 1px red;
    margin-top: 0.2rem;
    text-align: left;
}
img{
    height: 0.4rem;
    width: auto;
}
</style>

